<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气应用 - 首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1E88E5',
            secondary: '#64B5F6',
            accent: '#0288D1',
            light: '#E3F2FD',
            dark: '#0D47A1',
            weather: {
              sunny: '#FFC107',
              cloudy: '#BDBDBD',
              rainy: '#42A5F5',
              snowy: '#E0E0E0'
            }
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-sky {
        background-image: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
      }
    }
  </style>
  
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="font-inter bg-light min-h-screen">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3">
      <div class="flex items-center justify-between">
        <!-- 应用Logo -->
        <div class="flex items-center space-x-2">
          <i class="fa fa-cloud text-primary text-2xl"></i>
          <h1 class="text-xl font-bold text-dark">天气应用</h1>
        </div>
        
        <!-- 用户菜单 -->
        <div class="flex items-center space-x-4">
          <div class="relative">
            <button id="userMenuBtn" class="flex items-center space-x-2 focus:outline-none">
              <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
                <i class="fa fa-user text-primary"></i>
              </div>
              <span class="hidden md:inline-block text-sm font-medium" id="currentUsername">用户</span>
              <i class="fa fa-angle-down text-gray-500"></i>
            </button>
            
            <!-- 用户下拉菜单 -->
            <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden">
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                <i class="fa fa-user-circle mr-2"></i>个人资料
              </a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                <i class="fa fa-cog mr-2"></i>设置
              </a>
              <div class="border-t border-gray-100 my-1"></div>
              <a href="#" id="logoutBtn" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                <i class="fa fa-sign-out mr-2"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 py-6">
    <!-- 当前位置和日期 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800" id="currentCity">北京</h2>
          <p class="text-gray-500" id="currentDate">2025年7月11日 星期五</p>
        </div>
        
        <!-- 搜索城市 -->
        <div class="relative">
          <input type="text" id="citySearch" placeholder="搜索城市..." 
                 class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 w-full md:w-64">
          <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
            <i class="fa fa-search"></i>
          </button>
          <button id="searchBtn" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary text-white p-1.5 rounded">
            <i class="fa fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 当前天气卡片 -->
    <div class="bg-gradient-sky rounded-2xl shadow-lg overflow-hidden mb-8 relative">
      <!-- 装饰元素 -->
      <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"></div>
      <div class="absolute bottom-0 left-0 w-20 h-20 bg-white/5 rounded-full -ml-10 -mb-10"></div>
      
      <div class="p-6 md:p-8 relative z-10">
        <div class="flex flex-col md:flex-row items-center justify-between">
          <!-- 左侧：天气信息 -->
          <div class="mb-6 md:mb-0">
            <div class="flex items-center space-x-3">
              <i class="fa fa-sun-o text-5xl text-yellow-300 animate-float"></i>
              <div>
                <h3 class="text-3xl md:text-4xl font-bold text-white text-shadow" id="currentTemp">25°C</h3>
                <p class="text-white/90 text-lg" id="weatherCondition">晴转多云</p>
              </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mt-6">
              <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3">
                <p class="text-white/80 text-sm">体感温度</p>
                <p class="text-white font-medium" id="feelsLike">26°C</p>
              </div>
              <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3">
                <p class="text-white/80 text-sm">湿度</p>
                <p class="text-white font-medium" id="humidity">50%</p>
              </div>
              <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3">
                <p class="text-white/80 text-sm">风速</p>
                <p class="text-white font-medium" id="windSpeed">3.5 km/h</p>
              </div>
              <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3">
                <p class="text-white/80 text-sm">气压</p>
                <p class="text-white font-medium" id="pressure">1013 hPa</p>
              </div>
            </div>
          </div>
          
          <!-- 右侧：日出日落 -->
          <div class="bg-white/10 backdrop-blur-sm rounded-xl p-5 w-full md:w-auto">
            <h4 class="text-white text-center mb-4 font-medium">日出日落</h4>
            <div class="flex items-center justify-between space-x-8">
              <div class="text-center">
                <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-2">
                  <i class="fa fa-sun-o text-white"></i>
                </div>
                <p class="text-white/80 text-sm">日出</p>
                <p class="text-white font-medium" id="sunrise">05:32</p>
              </div>
              <div class="text-center">
                <div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mx-auto mb-2">
                  <i class="fa fa-moon-o text-white"></i>
                </div>
                <p class="text-white/80 text-sm">日落</p>
                <p class="text-white font-medium" id="sunset">19:45</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 未来7天天气预报 -->
    <div class="mb-8">
      <h3 class="text-xl font-bold text-gray-800 mb-4">未来7天预报</h3>
      
      <div class="overflow-x-auto scrollbar-hide">
        <div class="flex space-x-4 pb-4 min-w-max">
          <!-- 未来7天天气预报卡片 -->
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周五</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-sun-o text-yellow-500 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">28°C</p>
            <p class="text-center text-sm text-gray-500">晴</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周六</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-cloud text-gray-400 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">26°C</p>
            <p class="text-center text-sm text-gray-500">多云</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周日</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-cloud-rain text-blue-400 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">23°C</p>
            <p class="text-center text-sm text-gray-500">小雨</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周一</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-bolt text-yellow-500 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">22°C</p>
            <p class="text-center text-sm text-gray-500">雷阵雨</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周二</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-cloud text-gray-400 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">24°C</p>
            <p class="text-center text-sm text-gray-500">多云</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周三</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-sun-o text-yellow-500 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">27°C</p>
            <p class="text-center text-sm text-gray-500">晴</p>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-4 card-hover w-28">
            <p class="text-center text-gray-600 font-medium">周四</p>
            <div class="flex justify-center my-3">
              <i class="fa fa-sun-o text-yellow-500 text-2xl"></i>
            </div>
            <p class="text-center font-bold text-gray-800">29°C</p>
            <p class="text-center text-sm text-gray-500">晴</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 每小时天气预报图表 -->
    <div class="bg-white rounded-xl shadow-md p-4 mb-8">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-800">今日每小时预报</h3>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full">温度</button>
          <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-full">降水</button>
          <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-full">风速</button>
        </div>
      </div>
      
      <div class="h-64">
        <canvas id="hourlyChart"></canvas>
      </div>
    </div>
    
    <!-- 收藏城市 -->
    <div class="mb-8">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-gray-800">收藏城市</h3>
        <button class="text-primary hover:text-dark transition-colors">
          <i class="fa fa-plus-circle mr-1"></i> 添加
        </button>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- 收藏城市卡片 -->
        <div class="bg-white rounded-xl shadow-md p-4 card-hover">
          <div class="flex items-center justify-between">
            <div>
              <h4 class="font-bold text-gray-800">上海</h4>
              <p class="text-sm text-gray-500">今天 14:00</p>
            </div>
            <button class="text-gray-400 hover:text-red-500 transition-colors">
              <i class="fa fa-heart"></i>
            </button>
          </div>
          
          <div class="flex items-center justify-between mt-3">
            <div class="flex items-center">
              <i class="fa fa-sun-o text-yellow-500 text-2xl mr-2"></i>
              <span class="text-xl font-bold text-gray-800">27°C</span>
            </div>
            <div class="text-right">
              <p class="text-sm text-gray-600">体感: 28°C</p>
              <p class="text-sm text-gray-600">晴</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-4 card-hover">
          <div class="flex items-center justify-between">
            <div>
              <h4 class="font-bold text-gray-800">广州</h4>
              <p class="text-sm text-gray-500">今天 14:00</p>
            </div>
            <button class="text-gray-400 hover:text-red-500 transition-colors">
              <i class="fa fa-heart"></i>
            </button>
          </div>
          
          <div class="flex items-center justify-between mt-3">
            <div class="flex items-center">
              <i class="fa fa-cloud-rain text-blue-400 text-2xl mr-2"></i>
              <span class="text-xl font-bold text-gray-800">29°C</span>
            </div>
            <div class="text-right">
              <p class="text-sm text-gray-600">体感: 31°C</p>
              <p class="text-sm text-gray-600">中雨</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-4 card-hover">
          <div class="flex items-center justify-between">
            <div>
              <h4 class="font-bold text-gray-800">深圳</h4>
              <p class="text-sm text-gray-500">今天 14:00</p>
            </div>
            <button class="text-gray-400 hover:text-red-500 transition-colors">
              <i class="fa fa-heart-o"></i>
            </button>
          </div>
          
          <div class="flex items-center justify-between mt-3">
            <div class="flex items-center">
              <i class="fa fa-cloud text-gray-400 text-2xl mr-2"></i>
              <span class="text-xl font-bold text-gray-800">28°C</span>
            </div>
            <div class="text-right">
              <p class="text-sm text-gray-600">体感: 30°C</p>
              <p class="text-sm text-gray-600">多云</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white py-6 border-t border-gray-200">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center justify-between">
        <div class="mb-4 md:mb-0">
          <div class="flex items-center justify-center md:justify-start">
            <i class="fa fa-cloud text-primary text-xl mr-2"></i>
            <span class="font-bold text-gray-800">天气应用</span>
          </div>
          <p class="text-center md:text-left text-sm text-gray-500 mt-1">
            提供全球实时天气信息和预报服务
          </p>
        </div>
        
        <div class="flex space-x-6">
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-weibo"></i>
          </a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-weixin"></i>
          </a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-facebook"></i>
          </a>
        </div>
      </div>
      
      <div class="border-t border-gray-200 mt-6 pt-6 text-center text-sm text-gray-500">
        <p>© 2025 天气应用 版权所有 | <a href="#" class="text-primary hover:text-dark">隐私政策</a> | <a href="#" class="text-primary hover:text-dark">服务条款</a></p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 检查用户是否已登录
      const currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
      if (!currentUser) {
        // 用户未登录，重定向到登录页面
        window.location.href = 'index.html';
        return;
      }
      
      // 设置当前用户名
      document.getElementById('currentUsername').textContent = currentUser.username;
      document.getElementById('currentCity').textContent = currentUser.city || '北京';
      
      // 设置当前日期
      const now = new Date();
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
      
      // 用户菜单切换
      const userMenuBtn = document.getElementById('userMenuBtn');
      const userMenu = document.getElementById('userMenu');
      
      userMenuBtn.addEventListener('click', function() {
        userMenu.classList.toggle('hidden');
      });
      
      // 点击其他地方关闭用户菜单
      document.addEventListener('click', function(event) {
        if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
          userMenu.classList.add('hidden');
        }
      });
      
      // 退出登录
      document.getElementById('logoutBtn').addEventListener('click', function(e) {
        e.preventDefault();
        sessionStorage.removeItem('currentUser');
        window.location.href = 'index.html';
      });
      
      // 城市搜索功能
      const citySearch = document.getElementById('citySearch');
      const searchBtn = document.getElementById('searchBtn');
      
      searchBtn.addEventListener('click', function() {
        const city = citySearch.value.trim();
        if (city) {
          // 更新当前城市显示
          document.getElementById('currentCity').textContent = city;
          
          // 模拟搜索加载
          citySearch.disabled = true;
          searchBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
          
          setTimeout(() => {
            // 更新用户的默认城市
            if (currentUser) {
              currentUser.city = city;
              sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
              
              // 在实际应用中，这里会更新服务器上的用户数据
              // 这里仅更新localStorage中的测试用户数据
              const users = JSON.parse(localStorage.getItem('users') || '[]');
              const userIndex = users.findIndex(u => u.username === currentUser.username);
              if (userIndex !== -1) {
                users[userIndex].city = city;
                localStorage.setItem('users', JSON.stringify(users));
              }
            }
            
            // 重置搜索框
            citySearch.value = '';
            citySearch.disabled = false;
            searchBtn.innerHTML = '<i class="fa fa-arrow-right"></i>';
            
            // 显示成功提示
            alert(`已切换到 ${city} 的天气信息`);
          }, 1000);
        }
      });
      
      // 每小时天气预报图表
      const ctx = document.getElementById('hourlyChart').getContext('2d');
      const hourlyChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
          datasets: [{
            label: '温度 (°C)',
            data: [20, 19, 18, 20, 25, 28, 26, 23],
            borderColor: '#1E88E5',
            backgroundColor: 'rgba(30, 136, 229, 0.1)',
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#FFFFFF',
            pointBorderColor: '#1E88E5',
            pointBorderWidth: 2,
            pointRadius: 4,
            pointHoverRadius: 6
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              mode: 'index',
              intersect: false,
              backgroundColor: 'rgba(255, 255, 255, 0.9)',
              titleColor: '#333',
              bodyColor: '#666',
              borderColor: '#ddd',
              borderWidth: 1,
              padding: 10,
              boxPadding: 5,
              usePointStyle: true,
              callbacks: {
                label: function(context) {
                  return `${context.raw}°C`;
                }
              }
            }
          },
          scales: {
            x: {
              grid: {
                display: false
              },
              ticks: {
                color: '#666'
              }
            },
            y: {
              beginAtZero: false,
              grid: {
                color: 'rgba(0, 0, 0, 0.05)'
              },
              ticks: {
                color: '#666',
                callback: function(value) {
                  return value + '°C';
                }
              }
            }
          },
          interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
          }
        }
      });
    });
  </script>
</body>
</html>